<template>
  <div class="uploadfile">
    <el-upload 
      :multiple="true" 
      :disabled="!isEdit" 
      :data="data" class="upload-demo"
      ref="upload" 
      :action="host + path"
      :headers="headers" 
      :accept="fileAllow" :before-upload="beforeAvatarUpload" 
      name="file" :on-remove="handleRemove" :limit="limit" 
      :on-exceed="handleExceed" :file-list="fileList" 
      :on-success="filesuccess"
      :auto-upload="autoUpload"
      :on-preview="preview">
      <!-- <el-button type="primary" :disabled="isEdit == 0" size="small">上传</el-button> -->
      <i class="el-icon-upload" v-if="isEdit"></i>
      <i class="el-icon-paperclip" v-else></i>
      <div class="el-upload__text" v-if="isEdit">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip" v-if="showtip && isEdit">只能上传{{fileAllow}}文件，且不超过{{fileSize}}M{{ bz}}</div>
    </el-upload>
    <el-dialog title="预览"  v-model="dialogVisible" width="60%" v-if="lookpdf" :append-to-body="true">
      <pdf :src="src"></pdf>
      <!-- <el-image
      v-else
      style="width: 100%"
      src="./1111.jpg"
      :fit="'contain'"></el-image> -->
    </el-dialog>
  </div>
</template>
<script>
// import request from './../../api/request'
import pdf from './pdfShow';
// import config from "@/config";
const config = {}
export default {
  data() {
    return {
      src: "",
      dialogVisible: false,
      fileList: [],
      // host: config.baseUrl,
      host: '',
      headers: {
        Authorization: sessionStorage['hr_token']
      },
      type: 'pdf'
    };
  },
  mounted() {
    // this.host = request.defaults.baseURL;
    if(this.lists != '' && this.lists != null){
      let arr = this.lists.split(",");
      console.log(arr);
      let objarr = [];
      for (let i = 0; i < arr.length; i++) {
        let tempname = arr[i].split("/")[arr[i].split("/").length - 1];
        objarr.push({
          name: tempname,
          url: arr[i]
        });
      }
      console.log(objarr,'objarr');
      this.fileList = objarr;
    }
  },
  components:{
    pdf
  },
  props: {
    isEdit:{
      default : true,
      type: Boolean
    },
    bz:{
      default : '',
      type: String
    },
    lookpdf: {
      default: true,
      type: Boolean
    },
    limit: {
      default: 1,
      type: Number
    },
    fileAllow: {
      default: ".pdf",
      type: String
    },
    fileSize: {
      default: 100,
      type: Number
    },
    showtip: {
      default: true,
      type: Boolean
    },
    lists: {
      default: "",
      type: String
    },
    data:{
      // userCode
      // fileType //1、通知公告 2、活动参与 3、学历 4、职称信息 5、奖惩信息 6、专业技能 7、业绩头衔 8、工作经历
      default:() => {},
      type: Object
    },
    path: {
      default: config.uploadUrl,
      type: String
    },
    autoUpload: {
      default: true,
      type: Boolean
    }
  },
  watch: {
    lists(n, o) {
      if(this.lists != ''&& this.lists != null){
      let arr = n.split(",");
      console.log(arr);
      let objarr = [];
      for (let i = 0; i < arr.length; i++) {
        let tempname = arr[i].split("/")[arr[i].split("/").length - 1];
        objarr.push({
          name: tempname,
          url: arr[i]
        });
      }
      console.log(objarr,'objarr');
      this.fileList = objarr;
    }else{
      this.fileList = []
    }
    }
  },
  methods: {
    clearfilelist() {
      console.log("触发");
      this.fileList = [];
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let listStr = '';
      fileList.forEach(item => {
        listStr += item.url
      })
      this.emit("delete", listStr);
    },
    filesuccess(res) {
      console.log("上传成功", res.code);
      if (res.code == 1) {
        console.log(`${this.lists},${res.object}`, "this.lists")
        let list = (this.lists != ''&& this.lists != null) ? `${this.lists},${res.object}` : res.object;
        this.emit("success", `${list}`);
      } else {
        this.$message.info(res.message);
      }
    },
    beforeAvatarUpload(file) {
      let arr = this.fileAllow.split(",");
      let upperArr = [];
      for (let i = 0; i < arr.length; i++) {
        upperArr.push(arr[i].toUpperCase());
      }
      arr = arr.concat(upperArr)
      console.log("允许上传文件", arr);
      let flag = false;
      // console.log(file.name.split('.')[file.name.split('.').length - 1])
      for (let i = 0; i < arr.length; i++) {
        if (
          "." + file.name.split(".")[file.name.split(".").length - 1] ==
          arr[i]
        ) {
          flag = true;
        }
      }
      const isLt2M = file.size / 1024 / 1024 < this.fileSize;
      if (!flag) {
        this.$message.warning("上传模板只能是" + this.fileAllow + "格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传模板大小不能超过 " + this.fileSize + "MB!");
      }
      return flag && isLt2M;
    },
    preview(files) {
      console.log(files)
      if (this.lookpdf) {
        this.dialogVisible = true;
        let src = "";
        if (files.response) {
          src = files.response.data || files.response.object;
        } else {
          src = files.url;
        }
        this.type = files.name.substr(-3,3)
        this.src = src;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }
};
</script>

<style scoped>
.upload-demo{
  text-align :center;
  border: dashed 1px #ccc;
  padding: 24px 0;
  border-radius: 10px;
  background: #fff
}
.el-icon-upload{
  font-size: 40px;
  color: #6791E7;
}
.el-icon-paperclip{
  font-size: 40px;
  color: #6791E7;
}

</style>
<style>
  .el-upload--text {
    border: none;
    height: 130px;
  } 
  .upload-demo {
    width: 370px;
    height: 140px;
    position: relative;
  }
  .upload-demo .el-upload-list,
  .upload-demo .el-upload__tip {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 2px;
  }
  .upload-demo .el-upload__tip {
     bottom:  50px;
  }
  .upload-demo .el-icon-upload{
    margin: 0
  }
</style>